<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>我的</title>
	<meta name="keywords" content="SVG特效, 手机微信网站特效, css3动画, html5特效, 网页特效" />
	<meta name="description" content="网页特效库-专注于HTML5、CSS3、js、jQuery、手机移动端等网页特效的手机与分享。特效库始终坚持：无会员、无积分、无限制的“三无原则”，所有的资源都免费提供广大童鞋下载学习和使用。"
	/>
	<link rel="stylesheet" type="text/css" href="css/demo.css" />
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<link rel="stylesheet" type="text/css" href="css/custom.css" />
	<script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
	<noscript>
		<link rel="stylesheet" type="text/css" href="css/styleNoJS.css" />
	</noscript>
</head>

<body>

	<div class="container demo-1">

		<nav class="codrops-demos">
			<a class="current-demo" href="index.html">Demo 1</a>
			<a href="index2.html">Demo 2</a>
		</nav>

		<div id="slider" class="sl-slider-wrapper">

			<div class="sl-slider">

				<div class="sl-slide bg-1" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2"
				 data-slice2-scale="2">
					<div class="sl-slide-inner">
						<div class="deco" data-icon="H"></div>
						<h2>我的项目8月</h2>
						<blockquote>
							<p style="display:flex;width:100%;">
								<ul style="display:inline-block;margin:50px;">
									<li><a href="作业-简易日历.html"  style="font-size:18px;font-family: cursive;">简易日历</a></li>
									<li><a href="./08.02/百度新闻.html" style="font-size:18px;font-family: cursive;">百度新闻</a></li>
									<li><a href="./08.03/轮播图.html" style="font-size:18px;font-family: cursive;">轮播图</a></li>
									<li><a href="./千图网/index.html" style="font-size:18px;font-family: cursive;">千图网</a></li>
									<h3 style="color:orange;font-size:25px;">08.07</h3>
									<li><a href="./8.7/作业/名车展示.html" style="font-size:18px;font-family: cursive;">名车展示</a></li>
									<li><a href="./8.7/作业/改变图片路径.html" style="font-size:18px;font-family: cursive;">改变图片路径</a></li>
									<li><a href="./8.7/作业/改变图片透明度.html" style="font-size:18px;font-family: cursive;">改变图片透明度</a></li>
									
								</ul>
								<ul style="display:inline-block;margin:50px;">
									<h3 style="color:orange;font-size:25px;">08.08</h3>
									<li><a href="./08.08/1.导航.html" style="font-size:18px;font-family: cursive;">导航</a></li>
									<li><a href="./08.08/2.菜单.html" style="font-size:18px;font-family: cursive;">下拉菜单</a></li>
									<h3 style="color:orange;font-size:25px;">08.09</h3>
									<li><a href="./08.09/倒计时.html" style="font-size:18px;font-family: cursive;">倒计时</a></li>
									<h3 style="color:orange;font-size:25px;">08.12</h3>
									<li><a href="./唯品会/唯品会.html" style="font-size:18px;font-family: cursive;">唯品会</a></li>
									
								</ul>
								<ul style="display:inline-block;margin:50px;">
									<h3 style="color:orange;font-size:25px;">08.15</h3>
										<li><a href="./8.15/1.选项卡.html" style="font-size:18px;font-family: cursive;">选项卡</a></li>
										<li><a href="./8.15/2.下拉菜单.html" style="font-size:18px;font-family: cursive">下拉菜单</a></li>
										<li><a href="./8.15/3.select.html" style="font-size:18px;font-family: cursive;">select</a></li>
										<li><a href="./8.15/4.订单.html" style="font-size:18px;font-family: cursive;">订单</a></li>
									<h3 style="color:orange;font-size:25px;">08.16</h3>
									<li><a href="./8.17/1.遮罩层.html" style="font-size:18px;font-family: cursive;">遮罩层</a></li>
									<li><a href="./8.17/2.轮播图.html" style="font-size:18px;font-family: cursive;">轮播图</a></li>
									
								</ul>
								<ul style="display:inline-block;margin:50px;">
									<h3 style="color:orange;font-size:25px;">08.19</h3>
									<li><a href="./8.19/1.星级评分.html" style="font-size:18px;font-family: cursive;">星级评分</a></li>
									<li><a href="./8.19/2.图片切换.html" style="font-size:18px;font-family: cursive;">图片切换</a></li>
									<li><a href="./8.19/3.字数统计.html" style="font-size:18px;font-family: cursive;">字数统计</a></li>
									<h3 style="color:orange;font-size:25px;">08.21</h3>
									<li><a href="./小米商城/index.html" style="font-size:18px;font-family: cursive;">小米商城</a></li>
								</ul>
								<ul style="display:inline-block;margin:50px;">
									
								</ul>
								<ul style="display:inline-block;margin:50px;">
									
								</ul>
							</p><cite>Ralph Waldo Emerson</cite>
						</blockquote>
					</div>
				</div>

				<div class="sl-slide bg-2" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5"
				 data-slice2-scale="1.5">
					<div class="sl-slide-inner">
						<div class="deco" data-icon="q"></div>
						<h2>Regula aurea</h2>
						<blockquote>
							<p>Until he extends the circle of his compassion to all living things, man will not himself find peace.</p><cite>Albert Schweitzer</cite></blockquote>
					</div>
				</div>

				<div class="sl-slide bg-3" data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2"
				 data-slice2-scale="1">
					<div class="sl-slide-inner">
						<div class="deco" data-icon="O"></div>
						<h2>Dum spiro, spero</h2>
						<blockquote>
							<p>Thousands of people who say they 'love' animals sit down once or twice a day to enjoy the flesh of creatures who have
								been utterly deprived of everything that could make their lives worth living and who endured the awful suffering
								and the terror of the abattoirs.</p><cite>Dame Jane Morris Goodall</cite></blockquote>
					</div>
				</div>

				<div class="sl-slide bg-4" data-orientation="vertical" data-slice1-rotation="-5" data-slice2-rotation="25" data-slice1-scale="2"
				 data-slice2-scale="1">
					<div class="sl-slide-inner">
						<div class="deco" data-icon="I"></div>
						<h2>Donna nobis pacem</h2>
						<blockquote>
							<p>The human body has no more need for cows' milk than it does for dogs' milk, horses' milk, or giraffes' milk.</p><cite>Michael Klaper M.D.</cite></blockquote>
					</div>
				</div>

				<div class="sl-slide bg-5" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2"
				 data-slice2-scale="1">
					<div class="sl-slide-inner">
						<div class="deco" data-icon="t"></div>
						<h2>Acta Non Verba</h2>
						<blockquote>
							<p>I think if you want to eat more meat you should kill it yourself and eat it raw so that you are not blinded by the
								hypocrisy of having it processed for you.</p><cite>Margi Clarke</cite></blockquote>
					</div>
				</div>
			</div>
			<!-- /sl-slider -->

			<nav id="nav-arrows" class="nav-arrows">
				<span class="nav-arrow-prev">Previous</span>
				<span class="nav-arrow-next">Next</span>
			</nav>

			<nav id="nav-dots" class="nav-dots">
				<span class="nav-dot-current"></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</nav>

		</div>
		<!-- /slider-wrapper -->

	</div>
	<div style="width: 100%; height: auto; line-height: 25px; text-align: center;">
		更多网页特效，请访问<a href="http://www.5iweb.com.cn"><b>网页特效库</b></a>,欢迎加入网页特效库QQ交流群：258242983
	</div>
	<script type="text/javascript" src="http://www.5iweb.com.cn/statics/js/jquery.1.7.1.min.js"></script>
	<script type="text/javascript" src="js/jquery.ba-cond.min.js"></script>
	<script type="text/javascript" src="js/jquery.slitslider.js"></script>
	<script type="text/javascript">
		$(function () {

			var Page = (function () {

				var $navArrows = $('#nav-arrows'),
					$nav = $('#nav-dots > span'),
					slitslider = $('#slider').slitslider({
						onBeforeChange: function (slide, pos) {

							$nav.removeClass('nav-dot-current');
							$nav.eq(pos).addClass('nav-dot-current');

						}
					}),

					init = function () {

						initEvents();

					},
					initEvents = function () {

						// add navigation events
						$navArrows.children(':last').on('click', function () {

							slitslider.next();
							return false;

						});

						$navArrows.children(':first').on('click', function () {

							slitslider.previous();
							return false;

						});

						$nav.each(function (i) {

							$(this).on('click', function (event) {

								var $dot = $(this);

								if (!slitslider.isActive()) {

									$nav.removeClass('nav-dot-current');
									$dot.addClass('nav-dot-current');

								}

								slitslider.jump(i + 1);
								return false;

							});

						});

					};

				return { init: init };

			})();

			Page.init();

			/**
			 * Notes: 
			 * 
			 * example how to add items:
			 */

			/*
			
			var $items  = $('<div class="sl-slide sl-slide-color-2" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1"><div class="sl-slide-inner bg-1"><div class="sl-deco" data-icon="t"></div><h2>some text</h2><blockquote><p>bla bla</p><cite>Margi Clarke</cite></blockquote></div></div>');
			
			// call the plugin's add method
			ss.add($items);

			*/

		});
	</script>
</body>

</html>